<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分屏模式</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
        body {
            margin:0px;
            padding:0px;
        }
        .header {
            position: absolute;
            width: 100%;
            height: 40px;
            top: 0px;
            background-color: black;
            line-height: 40px;
            padding-right: 5px;
        }

        .main {
            position: absolute;
            top: 40px;
            bottom: 20px;
            width: 100%;
        }

        .footer {
            position: absolute;
            bottom: 0px;
            height: 20px;
            width: 100%;
        }

        .header-link {
            display: inline-block;
            cursor: pointer;
            line-height: 40px;
            padding-left: 10px;
            padding-right: 10px;
            color: white;
            text-decoration: none;
        }

        .header-link:hover {
            /*background-color: #ccc;*/
            color: #ccc;
        }
        .search-box {
            float: right;
        }

        .search-box input {
            width: 300px;
            height: 25px;
        }

        .frame {
            float: left;
            /*width: 50%;*/
            height: 100%;
            border-right: 1px solid #ccc;
        }
        
        iframe {
            float: left;
            margin:0px;
            padding:0px;
            width: 100%;
            height: 100%;
            border: none;
            overflow: auto;
        }

        .float-left {
            float:left;
        }
        .col-md-12 {
            float: left;
            width: 100%;
        }
        .col-md-6 {
            float: left;
            width: 50%;
        }
        .control {
            width: 50%;
            border-left: 1px solid #ccc;
        }
        .hide {
            display: none;
        }
        .frame-state {
            float: left;
            overflow: auto;
            font-size: 14px;
            background-color: #eee;
            border-right: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class='header'>
    <div class="header-link-box">
        <a href="/system/index" class="header-link">返回系统</a>
        <a href="?cols=1" class="header-link">单列</a>
        <a href="?cols=2" class="header-link">两列</a>
        <a href="?cols=3" class="header-link">三列</a>
    </div>
    <div class="search-box hide">
        <input placeholder='搜索'>
        <button>搜索</button>
    </div>
</div>
<div class="main col-md-12">
<!--     <div class="frame">
        <iframe id="f1" data-label-id="state-1" src="/"></iframe>
    </div> -->
</div>
<div class="footer">
    <!-- <div class="iframe-state" id="state-1"></div> -->
</div>
<script src="/static/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/static/js/utils.js"></script>
<script>
var getUrlParams = function()
{
    var params = {};
    var url = window.location.href;
    url = url.split("#")[0];
    var idx = url.indexOf("?");
    if(idx > 0)
    {
        var queryStr = url.substring(idx + 1);
        var args = queryStr.split("&");
        for(var i = 0, a, nv; a = args[i]; i++)
        {
            nv = args[i] = a.split("=");
            if (nv.length > 1) {
                var value = nv[1];
                try {
                    params[nv[0]] = decodeURIComponent(value);
                } catch (e) {
                    params[nv[0]] = value;
                    console.warn('decode error', e)
                }
            }
        }
    }
    return params;
};

function GridView(url, id) {
    var iframe = $("<iframe>").attr("src", url)
        .attr("id", "f-" + id)
        .attr("data-label-id", "state-" + id);
    this.view = $("<div>").addClass("frame").append(iframe);
    this.state = $("<div>").addClass("frame-state").attr("id", "state-" + id);
}

GridView.prototype.render = function () {
    $(".main").append(this.view);
    $(".footer").append(this.state);
}
$(document.body).ready(function () {
    var params = getUrlParams();
    var cols = params["cols"] || 2;
    for (var i = 0; i < cols; i++) {
        new GridView("/", i).render();
    }
    $(".frame").css("width", 100/cols+"%");
    $(".frame-state").css("width", 100/cols+"%");

    $("iframe").on("load", function (e) {
        var id = $(this).attr("data-label-id");
        var src = $(this)[0].contentWindow.location.href;
        $("#" + id).text(src);
    })
})
</script>
</body>

